<template>
	<view class="bird list">
		<view class="total">当前共{{list.length}}种鸟
			<view class="sub">(左滑删除)</view>
		</view>

		<uni-swipe-action>
			<uni-swipe-action-item :right-options="options" class="list-card" v-for="(item, index) in list" :key='index'
				@click="onSwipe(index)">
				<view class="swipe-view">
					<image :src="item.avatar" mode="heightFix"></image>
					<view class="text-content">
						<text class="title">{{item.name}}</text>
						<view class="input-right">
							<view class="upload">
								<button size="mini" type="primary" @click="uploadFn(item)" class="upload-button">
									<uni-icons type="upload" size="16" color="#fff" />多媒体
								</button>
							</view>
							<uni-easyinput type="number" v-model="item.num" :clearable="false" prefixIcon='bottom'
								suffixIcon='top' @iconClick="iconClick($event, item)" />
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<operate-footer from='bird' @save="save" />

		<uni-popup ref="popup" type="bottom" class="popup" background-color="#fff">
			<view class="header">
				<view>{{popup.title}}</view>
				<view class="text-center" @click="chooseFiles">
					<!-- <uni-file-picker ref="uploadFiles" v-model="popup.list" fileMediatype="all" mode="grid"
						@progress="progress" @select="select" @success="success">
						<uni-icons custom-prefix="iconfont" type="icon-add-bold" size="18" color="#fff" />选择多媒体文件
					</uni-file-picker> -->
					<uni-icons custom-prefix="iconfont" type="icon-add-bold" size="18" color="#fff" />选择多媒体文件
				</view>
				<view class="text-right" @click="close">关闭</view>
			</view>
			<view class="body">
				<view class="empty" v-if="popup.list.length === 0">暂无数据</view>
				<template v-else>
					<scroll-view scroll-y="true" class="scroll-Y" :style="{'max-height': windowHeight}">
						<view class="file-content" v-for="item in popup.list" :key="item.path">
							<uni-icons custom-prefix="iconfont" type="videocam-filled" size="30" />
							<view class="file-right">
								<image class="file-image" mode="item.mode" :src="item.path"></image>
								<!-- <view><text class="file-label">文件名称：</text>{{item.name}}</view> -->
								<view>
									<text class="file-label">繁殖方式：</text>
									<picker class="inline-block" mode="selector" :range="breedList" range-key="name"
										:value="item.breedIndex" @change="bindBreedChange($event, item)">
										<view class="uni-input" :class="{'text-empty': item.breedIndex === null}">
											{{item.breedIndex!==null ? breedList[item.breedIndex].name : '请选择繁殖方式'}}
										</view>
									</picker>
								</view>
							</view>
						</view>
					</scroll-view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				popup: {
					title: '',
					list: []
				},
				breedList: [{
					name: '无'
				}, {
					name: '巢'
				}, {
					name: '卵'
				}]
			}
		},
		methods: {
			iconClick(key, item) {
				if (item.num > 0 || key !== 'prefix') {
					key === 'prefix' ? item.num-- : item.num++
				}
			},
			onSwipe(index) {
				uni.showModal({
					title: '删除鸟种',
					content: '是否确定删除该鸟种？',
					success: resModal => {
						if (resModal.confirm) {
							this.list.splice(index, 1)
						}
					}
				});
			},
			uploadFn(item) {
				this.popup.title = item.name
				this.$refs.popup.open()
			},
			chooseFile() {
				this.$refs.uploadFiles.upload()
			},
			close() {
				this.$refs.popup.close()
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 选择文件
			select(e) {
				console.log('选择文件', e)
				// breedIndex
				// this.popup.list = this.popup.list.concat(e.tempFiles)
				e.tempFiles.forEach(item => {
					this.popup.list.push({
						...item,
						breedIndex: null
					})
				})
				console.log('选择文件11', this.popup.list)
			},
			// 上传成功
			success(e) {
				console.log('上传成功', e)
			},
			bindBreedChange(event, val) {
				console.log(event, val)
				val.breedIndex = event.detail.value
			},
			save() {
				// 图片+视频：('jpg', 'jpe', 'jpeg', 'png', 'gif', 'svg', 'bmp', 'wav', 'mp3', 'aac', 'ogg', 'oga', 'flac')
				if (this.popup.list.length > 0) {
					this.popup.list.forEach(item => {
						console.log(item)
						this.loading = true
						uni.showLoading({
							title: '加载中'
						})
						uni.uploadFile({
							url: 'http://192.168.136.8:5001/api/data/statistic', //仅为示例，非真实的接口地址
							// files: [{
							// 	name: 'file',
							// 	uri: item.file
							// }],
							filePath: item.path,
							name: 'file',
							header: {
								token: 'eyJhbGciOiJIUzUxMiIsImlhdCI6MTYzODc1Mzg2MCwiZXhwIjoxNjM4OTM3ODYwfQ.eyJpZCI6MX0.48NIGl6xTnZ5Hx4saZr4Q13ZExru1uljMaO9h4WMyDm2fL5UdEedGXSBbIQi_PCsEb5XeyaFlkvPCIDc3m0tuw'
							},
							formData: {
								breed: this.breedList[item.breedIndex || 0].name,
								name: item.name,
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								uni.showToast({
								    title: '保存成功'
								});
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
								    title: '保存失败'
								});
							},
							complete: () => {
								this.loading = false
								uni.hideLoading()
							}
						});
					})
				}

			},
			chooseFiles() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes)
						tempFilePaths.map((item, index) => {
							console.log(index, item)
							this.popup.list.push({
								path: item,
								breedIndex: null
							})
						})
				    },
					fail: (err) => {
						console.log(err)
					}
				});
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = (res.windowHeight - 100) + 'px'
				}
			})
			this.list.push({
				avatar: 'xxx',
				name: 'xxx',
				num: 3,
			})
			uni.$on('bird-type', (res) => {
				if (res)
					this.list.push(res)
			})
		},
		onUnload() {
			uni.$off('bird-type');
		}
	}
</script>

<style lang="scss" scoped>
	.bird {
		.total {
			text-align: center;
			font-size: 38rpx;
			color: #333;
			height: 140rpx;

			.sub {
				font-size: 80%;
				color: #999;
			}
		}

		.input-right {
			float: right;
			display: inline-block;


			::v-deep .uni-easyinput {
				display: inline-block;
				width: 120rpx;
				text-align: center;

				.uni-easyinput__content {
					height: 60rpx;
					overflow: hidden;
				}

				.content-clear-icon {
					padding: 0 3rpx 0 6rpx;
				}
			}

			.upload {
				height: 100%;
				margin-right: 20rpx;
				position: relative;
				display: inline-block;

				.upload-button {
					position: relative;
					top: -5rpx;
					vertical-align: middle;
				}
			}
		}

		.swipe-view {
			height: 140rpx;
		}

		.list-card:last-of-type {
			.swipe-view {
				border-bottom: 2rpx solid #e0e5e5;
			}
		}

		.popup {
			.header {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				background-color: $uni-bg-color;
				color: #fff;
				display: flex;
				flex-direction: row;

				>view {
					flex: 1;
				}

				.text-center {
					flex: none;
					line-height: 40px;
				}
			}

			.body {
				padding: 20rpx;
			}
		}

		::v-deep .uni-file-picker {
			.uni-file-picker__files {
				height: 40px;
			}

			.uni-file-picker__lists {
				display: none;
			}
		}

		.file-content {
			padding: 30rpx 0;
			white-space: nowrap;

			&:not(:last-of-type) {
				border-bottom: 2rpx solid #e0e5e5;
			}

			.file-right {
				color: #333;
				display: inline-block;
				vertical-align: middle;
			}

			.file-label {
				color: #666;
			}
		}

		.text-empty {
			color: #999;
		}
	}
</style>
